<template>
  <div class="edu-page-warp">
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
      <div slot="header">
        <div class="title">准考证相关设置</div>
      </div>
      <el-form :model="examForm" label-position="right" class="exam-form" ref="examForm" label-width="160px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="准考证打印开始时间：" prop="printStartStr" :rules="[{ required: true, message:'准考证打印开始时间不能为空', trigger: 'change'}]">
              <el-date-picker v-model="examForm.printStartStr" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('common.pla.pleaseSelect')" :picker-options="bmkssjPickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="准考证打印结束时间：" prop="printEndStr" :rules="[{ required: true, message: '准考证打印结束时间不能为空', trigger: 'change'}]">
              <el-date-picker v-model="examForm.printEndStr" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('common.pla.pleaseSelect')" :picker-options="bmjssjPickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 文本编辑器 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label='考试注意事项：' prop="remark" :rules="[{ required: true, message: '考试注意事项不能为空', trigger: 'blur'},{ validator: checkSpecial, trigger: 'change'}]">
              <Tinymce style="margin: 11px 0 0 0;" ref="editor" :height="200" :simple="false" :hideMenu="true" v-model="examForm.remark" :toolbar="toolbar" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="operate-btn-container">
        <div class="float-right">
          <!-- <el-button @click="cancelOperate()">{{ $t('common.btn.cancel') }}</el-button> -->
          <el-button type="primary" @click="confirmOperate()">{{ $t('common.btn.confirm') }}</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import Tinymce from 'common/src/components/tinymce';
import subjectCompetitionApi from 'common/src/api/subjectCompetition/subjectCompetition';
export default {
  props: ['examCategory'],
  name: "",
  components: {
    Tinymce
  },
  computed: {
    bmkssjPickerOptions() {
      let _this = this
      return {
        // 报名开始时间必须小于报名截止时间
        // disabledDate: (value) => {
        //   if (_this.examForm.printEndStr) {
        //     if (value.getTime() > new Date(_this.examForm.printEndStr.split(' ')[0]).getTime()) {
        //       return true
        //     }
        //   }
        //   return false
        // }
      }
    },
    bmjssjPickerOptions() {
      let _this = this
      return {
        disabledDate: (value) => {
          if (_this.examForm.printStartStr) {
            // 评分截止时间必须大于评分开始时间
            if (value.getTime() + (24 * 60 * 60 * 1000) < new Date(_this.examForm.printStartStr.split(' ')[0]).getTime()) {
              return true
            }
          }
          return false
        }
      }
    }
  },
  mounted() {
    this.ticketSetDetailfun();
  },
  data() {
    return {
      tipId: null,
      setId: null,
      examForm: {
        printStartStr: null,
        printEndStr: null,
        remark: null
      },
      toolbar: ['undo redo | styleselect | fontselect | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | table | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist |  fullscreen '],
    };
  },
  filters: {
  },
  watch: {
  },
  methods: {

    ticketSetDetailfun() {
      subjectCompetitionApi.ticketSetDetails(this.examCategory).then(res => {
        if (res.code === 200) {
          if (res.data && res.data != null) {
            if (res.data.remark) {
              this.examForm.remark = res.data.remark;
            }
            if (res.data.printStart) {
              this.examForm.printStartStr = res.data.printStart;
            }
            if (res.data.printEnd) {
              this.examForm.printEndStr = res.data.printEnd;
            }
          }

          if (res.data == null) {
            this.tipId = true;
          } else {
            this.setId = res.data.id;
          }
        } else {
          this.$message({ type: 'error', message: res.msg })
        }
      });
    },

    // 确认操作
    confirmOperate() {
      this.$refs['examForm'].validate((valid) => {
        if (valid) {
          if (this.examForm.printStartStr > this.examForm.printEndStr) {
            this.$eduAlert(this.$t('mandarin.validateRegistTime'), this.$t('graduateBase.prompt'), {
              type: 'warning'
            })
            return
          }
          this.examForm.examCategory = this.examCategory;
          if (!this.tipId) {
            this.examForm.id = this.setId;
          }
          subjectCompetitionApi.ticketSet(this.examForm).then(res => {
            if (res.code === 200) {
              this.ticketSetDetailfun();
              this.$message({ type: 'success', message: '成功' })
            } else {
              this.$message({ type: 'error', message: res.msg })
            }
          });

        }
      })
    },

  }
};
</script>
<style lang="scss" scoped>
.el-card {
    padding-bottom: 20px;
}
::v-deep {
    .editor-custom-btn-container {
        display: none;
    }
}
</style>
<style>
</style>
